<template>
	<view class="tab-bar">
		<view class="tab-bar-border"></view>
		<view v-for="(item, index) in list" :key="index" class="tab-bar-item" @click="handleSwitchTab(item.pagePath, index)">
			<view class="img-box">
				<image mode="aspectFit" :src="recruitCurrentTabbar === index ? item.selectedIconPath : item.iconPath"></image>
				<view class="txt" v-if="index == 2 && count > 0">{{count > 99 ? 99 : count}}</view>
			</view>
			<view :style="{'color': recruitCurrentTabbar === index ? selectedColor : color}">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"

	export default {
		data() {
			return {
				count: 0,
				color: "#676B7E",
				selectedColor: "#42475E",
				custom: false,
				list: [{
						"index": 0,
						"pagePath": "/pages/index/index",
						"text": "首页",
						"iconPath": "/static/images/home.png",
						"selectedIconPath": "/static/images/home-curr.png"
					},
					{
						"index": 1,
						"pagePath": "/pages/recruit",
						"text": "职位",
						"iconPath": "/static/images/position.png",
						"selectedIconPath": "/static/images/position-curr.png"
					},
					{
						"index": 2,
						"pagePath": "/pages/recruit/message/index",
						"text": "消息",
						"iconPath": "/static/images/msg.png",
						"selectedIconPath": "/static/images/msg-curr.png"
					},
					{
						"index": 3,
						"pagePath": "/pages/recruit/my/index",
						"text": "我的",
						"iconPath": "/static/images/my.png",
						"selectedIconPath": "/static/images/my-curr.png"
					}
				]
			}
		},
		computed: {
			isBoss() {
				return this.identity == 2
			},
			...mapGetters(["recruitCurrentTabbar", "myTimInfo", "identity"])
		},
		onReady() {
			if (this.isBoss) {
				let list = this.list
				list[1] = {
					"pagePath": "/pages/recruit",
					"text": "牛人",
					"iconPath": "/static/images/resume.png",
					"selectedIconPath": "/static/images/resume-curr.png"
				}

				this.$set(this.list, list)
			}

			this.timlogin()
		},
		methods: {
			timlogin() {
				const identity = this.isBoss ? 'gdx' : '',
					userID = uni.getStorageSync("openId") + identity,
					userSig = this.isBoss ? uni.getStorageSync("userSigBoss") : uni.getStorageSync("userSig");
		
				// case1: 要登录的用户是当前已登录的用户，则直接跳转即可
				if (this.myTimInfo.userID && userID === this.myTimInfo.userID) return

				// case2: 当前已经登录了用户，但是和即将登录的用户不一致，则先登出当前登录的用户，再登录
				if (this.myTimInfo.userID) {
					this.$store.dispatch('tim/resetStore')
					uni.$Tim.logout()
						.then(() => {
							this.login(userID, userSig)
						})
					return
				}
				// case3: 正常登录流程
				this.login(userID, userSig)
			},
			login(userID, userSig) {
				try{
					uni.$Tim.login({userID,userSig})
				}catch(e){
					console.log('TIM 登录失败：',e.message)
				}
			},
			handleSwitchTab(url, index) {
				if (this.list[index].index === this.recruitCurrentTabbar) return

				this.$store.dispatch("recruit/setCurrentTabbar", index);

				if (index === 0) {
					uni.switchTab({
						url
					})
				} else {
					uni.reLaunch({
						url
					})
				}
			},
			handleChange(e) {
				this.current = e.detail.key
			},
			initFn(e) {
				let _this = this;
				if (this.identity == 2) {
					_this.list[1] = {
						"pagePath": "/pages/recruit",
						"text": "牛人",
						"iconPath": "/static/images/resume.png",
						"selectedIconPath": "/static/images/resume-curr.png"
					}

				} else {
					_this.list[1] = {
						"pagePath": "/pages/recruit",
						"text": "职位",
						"iconPath": "/static/images/position.png",
						"selectedIconPath": "/static/images/position-curr.png"
					}
				}
			},
		},
	}
</script>

<style lang="less">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 58px;
		background: white;
		display: flex;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tab-bar-border {
		background-color: rgba(0, 0, 0, 0.33);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		transform: scaleY(0.5);
	}

	.tab-bar-item {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 10rpx;

		image {
			width: 20px;
			height: 20px;
		}

		view {
			font-size: 10px;
		}

	}

	.img-box {
		position: relative;

		.txt {
			position: absolute;
			right: -15rpx;
			top: -6rpx;
			font-size: 20rpx;
			border: 3rpx solid #FFF;
			color: #fff;
			background: #FF5618;
			border-radius: 50rpx;
			min-width: 18rpx;
			min-height: 18rpx;
			line-height: 18rpx;
			padding: 8rpx;
		}
	}
</style>
